<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask Server</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="{{ url_for('static', type='text/css', filename='bootstrap.min.css') }}" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }

        header {
            background-color: #28a745;
            color: white;
            padding: 20px;
            text-align: center;
        }

        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        }

        .btn-custom {
            background-color: #28a745;
            color: white;
        }

        .btn-custom:hover {
            background-color: #218838;
        }

        .file-list a {
            color: #28a745;
            text-decoration: none;
        }

        .file-list a:hover {
            text-decoration: underline;
        }

        .form-control {
            margin-bottom: 15px;
        }
        .area {
            margin: 30px;
        }
    </style>
</head>

<body>
    <header>
        <h1>Flask Server</h1>
    </header>

    <div class="container mt-5">
        <div class="area">
            <!-- Send Text Form -->
            <h4>发送文本</h4>
            <!-- 错误信息提示 -->
            {% if error %}
                <div class="alert alert-danger" role="alert">
                    {{ error }}
                </div>
            {% endif %}
            <form method="POST" action="/send_text">
                <div class="mb-3">
                    <textarea class="form-control" name="text" placeholder="输入文本信息..." rows="4"></textarea>
                </div>
                <button type="submit" class="btn btn-primary">发送文本</button>
            </form>
        </div>
        <div class="area">
            <!-- Upload File Form -->
            <h4 class="mt-4">上传文件</h4>
            <form method="POST" enctype="multipart/form-data" action="/upload">
                <div class="mb-3">
                    <input class="form-control" type="file" name="file" />
                </div>
                <button type="submit" class="btn btn-primary">上传文件</button>
            </form>
        </div>

        <div class="area">
             <div class="accordion" id="updateTextList">
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#updateTextListOne" aria-expanded="true" aria-controls="updateTextListOne">
                      已上传的文本
                  </button>
                </h2>
                <div id="updateTextListOne" class="accordion-collapse collapse show" data-bs-parent="#updateTextList">
                  <div class="accordion-body">
                    <ul class="list-group">
                        {% for text in texts %}
                        <li class="list-group-item"><pre>{{ text }}</pre></li>
                        {% endfor %}
                    </ul>
                  </div>
                </div>
              </div>
            </div>

        </div>

        <div class="area">
            <div class="accordion" id="updateFileList">
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#updateFileListOne" aria-expanded="true" aria-controls="updateFileListOne">
                      已上传的文件
                  </button>
                </h2>
                <div id="updateFileListOne" class="accordion-collapse collapse show" data-bs-parent="#updateFileList">
                  <div class="accordion-body">
                        <table class="table table-striped-columns">
                            <thead>
                                <tr>
                                    <th>文件名</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for file in files %}
                                <tr>
                                    <td><a href="{{ url_for('uploaded_file', filename=file) }}">{{ file }}</a></td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                  </div>
                </div>
              </div>
            </div>

        </div>

        <div class="area">
            <div class="accordion" id="accordionExample">
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                      路由列表
                  </button>
                </h2>
                <div id="collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionExample">
                  <div class="accordion-body">
                        <table class="table table-striped-columns">
                            <thead>
                                <tr>
                                    <th>路由</th>
                                    <th>HTML 文件标题</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for route in dynamic_routes %}
                                <tr>
                                    <td><a href="{{ route.route }}">{{ route.route }}</a></td>
                                    <td>{{ route.title }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                  </div>
                </div>
              </div>
            </div>

        </div>

    </div>

    <!-- 引入 Bootstrap JS 和 Popper.js -->
    <script src="{{ url_for('static', filename='popper.min.js') }}"></script>
    <script src="{{ url_for('static', filename='bootstrap.min.js') }}"></script>

</body>

</html>
